<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 内联子标题</title>
    <!--<link href="/bootstrap/css/bootstrap.min.css">-->
    <!--<script src="/scripts/jquery.min.js"></script>-->
    <!--<script src="/bootstrap/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
<body>
内联子标题

<!--如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，-->
    <!--这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：-->
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

    <h2>引导主体副本</h2>
    <p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
    </p>

    <p class="">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
    </p>


强调<br>
    <!--HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。-->
        <!--Bootstrap 提供了一些用于强调文本的类，如下面实例所示：-->

        <small>本行内容是在标签内</small><br>
        <strong>本行内容是在标签内</strong><br>
        <em>本行内容是在标签内，并呈现为斜体</em><br>
        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>
        <p class="text-muted">本行内容是减弱的</p>
        <p class="text-primary">本行内容带有一个 primary class</p>
        <p class="text-success">本行内容带有一个 success class</p>
        <p class="text-info">本行内容带有一个 info class</p>
        <p class="text-warning">本行内容带有一个 warning class</p>
        <p class="text-danger">本行内容带有一个 danger class</p>


缩写：<br>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

地址：<br>

<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890</address>

<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">mailto@somedomain.com</a></address>




<blockquote><p>这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。
    这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。
    <small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>


列表

<!--
Bootstrap 支持有序列表、无序列表和定义列表。
有序列表：有序列表是指以数字或其他有序字符开头的列表。
无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
-->


<h4>有序列表</h4>
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li></ol>

<h4>无序列表</h4><ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li></ul>

<h4>未定义样式列表</h4><ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li></ul>

<h4>内联列表</h4><ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li></ul>

<h4>定义列表</h4><dl>
    <dt>Description 1</dt>
    <dd>Item 1</dd>
    <dt>Description 2</dt>
    <dd>Item 2</dd></dl>

<h4>水平的定义列表</h4><dl class="dl-horizontal">
    <dt>Description 1</dt>
    <dd>Item 1</dd>
    <dt>Description 2</dt>
    <dd>Item 2</dd></dl>


<p class="lead">这是个文字突出的段落。</p>
<p>这是一个普通的段落。</p>


<p class="text-left">左对齐文本</p>
<p class="text-right">右对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>
<p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>
<p><strong>提示:</strong> 尝试重置浏览器大写查看 “text-justify” 和 “text-nowrap” 段落的效果。</p>

<p class="text-lowercase">Lowercased text（小写文本）.</p>
<p class="text-uppercase">Uppercased text（大写文本）.</p>
<p class="text-capitalize">Capitalized text（首字母大写文本）.</p>

<p>右对齐引用内容:</p>
<blockquote class="blockquote-reverse">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
</blockquote>


<p>设置 pre 元素可滚动：</p>

<pre class="pre-scrollable">
		内容可滚动
		Text in a pre element
		is displayed in a fixed-width
		font, and it preserves
		both      spaces and
		line breaks.
		Text in a pre element
		is displayed in a fixed-width
		font, and it preserves
		both      spaces and
		line breaks.
		</pre>

<p>使用 dl 元素设置描述列表：</p>
<dl class="dl-horizontal">
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>






<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>